<template>
  <div class="list">
    <div>
      <RatedList />
      <!-- <MoviesList @succ="addBs" @finish="fininshMore" ref="ml" /> -->
      <MoviesList />
      <!-- <p v-if="showFinish">没有更多了</p> -->
    </div>
  </div>
</template>

<script>
import RatedList from "./components/RatedList.vue";
import MoviesList from "./components/MoviesList.vue";
import BScroll from "better-scroll";

let bs;

import { mapActions } from "vuex";

export default {
  components: {
    RatedList,
    MoviesList,
  },
  async mounted() {
    await this.asyncGetMovies();
    bs = new BScroll(".list", {
      scrollX: false,
      scrollY: true,
      click: true,
      // 允许我们使用上拉加载了
      // pullUpLoad: true,
      pullUpLoad: {
        threshold: 50,
      },
    });
    bs.on("pullingUp", async () => {
      // console.log("拉到底了");
      const finish = await this.asyncGetMore();
      bs.refresh();
      if (!finish) {
        bs.finishPullUp();
      }
    });
  },
  methods: {
    ...mapActions("hot", ["asyncGetMovies", "asyncGetMore"]),
  },

  // data() {
  //   return {
  //     showFinish: false,
  //   };
  // },
  // methods: {
  //   addBs() {
  //     bs = new BScroll(".list", {
  //       scrollX: false,
  //       scrollY: true,
  //       click: true,
  //       // 允许我们使用上拉加载了
  //       // pullUpLoad: true,
  //       pullUpLoad: {
  //         threshold: 50,
  //       },
  //     });

  //     // 监听拉到底的事件
  //     bs.on("pullingUp", () => {
  //       // console.log("拉到底了");
  //       this.$refs.ml.getMore();
  //     });
  //   },
  //   fininshMore(done) {
  //     // console.log("加载更多结束了");
  //     // 重新加载高度
  //     bs.refresh();
  //     // bs.on("refresh", () => {});

  //     // 告诉bs这一次已经结束，可以准备下一次了
  //     if (!done) {
  //       bs.finishPullUp();
  //     } else {
  //       this.showFinish = true;
  //     }
  //   },
  // },
};
</script>

<style lang="less" scoped>
.list {
  width: 100%;
  height: 100%;
}
</style>
